<template>
	<view class="main">
		<header-vue :back="true" :title="title"></header-vue>
		<shopListComVue :info="info"></shopListComVue>
	</view>
</template>

<script>
	import headerVue from '@/components/header.vue'
	import {
		searchApi
	} from '../../api/modules/shop'
	import appConfig from '@/config/app.js'
	import request from '../../utils/request'
	import shopListComVue from './components/shopListCom.vue'

	export default {
		data() {
			return {
				IMAGE_URL: appConfig.IMAGE_URL,
				info: {}
			}
		},
		components: {
			headerVue,
			shopListComVue
		},
		mounted() {},
		methods: {},
		onLoad(options) {
			const info = JSON.parse(options.item)
			this.info = info
		}
	}
</script>
<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
		height: 100vh;
	}

	.scroll {
		height: calc(100vh - 130rpx);
	}

	.list {
		margin: 28rpx 32rpx 0;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: $uni-bg-color;

		.store-title {
			border-bottom: 1rpx solid #DDDDDD;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}

		.iconfont {
			margin-right: 4rpx;
		}

		.time-red-box {
			width: 30rpx;
			height: 30rpx;
			background: linear-gradient(155deg, #F54F4F 0%, #F07474 100%);
			border-radius: 6rpx;
			color: $uni-text-color-inverse;
			margin: 0 8rpx;
		}

		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 16rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.price {
			color: $uni-text-color-red;
			align-items: baseline;

			.font20 {
				text-decoration: line-through;
				color: #999999;
			}
		}

		.store-info {
			width: 100%;
			height: 200rpx;
			align-items: flex-start;

			.tag {
				padding: 0 8rpx;
				height: 28rpx;
				box-sizing: border-box;
				background: #DF9824;
				border-radius: 4rpx;
				margin-right: 8rpx;
				color: $uni-text-color-inverse;
			}

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 20rpx;
			}

			.num {
				color: $uni-text-color-grey1;
				width: 100%;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.progress {
			height: 56rpx;
			border-radius: 8rpx 16rpx 16rpx 8rpx;
			padding: 20rpx 16rpx;
			box-sizing: border-box;
			color: #FF4141;
			z-index: 1;

			.progress-bottom {
				background: $uni-bg-color;
				height: 16rpx;
				border-radius: 20rpx;
				width: 220rpx;
				margin-right: 12rpx;
			}

			.progress-active {
				background: linear-gradient(90deg, #FF6E6E 0%, #FF4141 100%);
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.qiang-box {
			position: relative;

			image {
				width: 100%;
				position: absolute;
				z-index: 0;
				height: 100%;
			}

			.price {
				z-index: 1;
				background: none;
				margin-left: 4rpx;
			}

			.qiang-txt {
				color: #fff;
				z-index: 1;
				width: 32rpx;
				margin-right: 28rpx;
			}
		}

		.comment-num {
			width: 134rpx;
			height: 40rpx;
			background: #FFF9F0;
			border-radius: 60rpx;
			color: #999999;
		}

		.icon-dingwei {
			color: #DF9824;
			margin-right: 4rpx;
		}

		.icon-jiantou {
			margin-right: 4rpx;
		}
	}
</style>